import React, { useState, useEffect } from 'react'

import Add from '../components/order/Add';
import Update from '../components/order/Update';
import List from '../components/order/List';
import Sel from '../components/order/Sel';

import { getAll, getOne } from '../services/order';
import { useSelector, useDispatch } from "react-redux";
import { setUpdateVisible, fetchOrder } from '../store/slices/orderSlice';
import { Col, Row } from 'antd';

export default function Order() {
  let [orders, setOrders] = useState([]);
  let [orderData, setOrderData] = useState({});
  // const [imageUrl, setImageUrl] = useState()

  // const [isModalVisible, setIsModalVisible] = useState(false);
  let [searchObj, setSearchObj] = useState({});
  let [pagination, setPagination] = useState({
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total) => `总共 ${total} 条`,
    pageSizeOptions: [5, 10, 15, 20],
  });
  // let updateVisible = useSelector((state) => state.order.updateVisible);
  let dispatch = useDispatch();
  const show = async (params) => {
    if (params) {
      params = { ...searchObj, ...params }
      setSearchObj(params);
    } else {
      params = searchObj;
    }
    let data = await getAll(params);
    console.log(data);
    setOrders(data.rows);
    setPagination({
      ...pagination,
      total: data.total,
      pageSize: data.size,
    });
  }

  useEffect(() => {
    show();
  }, [orders.length]);

  const handleUpdate = (info) => {
    console.log(info);
    setOrderData(info);
    console.log(orderData);
    // dispatch(fetchOrder(id));
    // setIsModalVisible(true);
    dispatch(setUpdateVisible(true));
  }


  return (
    <div>
      <Row>
        <Col span={2} ><Add show={show}></Add></Col>
        <Col span={12}> <Sel show={show}></Sel></Col>
      </Row>
      <Update show={show} orderData={orderData}></Update>
      <List handleUpdate={handleUpdate} show={show} orders={orders} pagination={pagination} ></List>
    </div>
  );

}